<template>
  <div class="total-order">
    <template>
      <div class="block df aic">
        <span class="demonstration">时间范围</span>
        <el-date-picker
          v-model="date"
          value-format="yyyy-MM-dd HH:mm:ss"
          type="datetimerange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          class="inputday"
        ></el-date-picker>
        <el-button type="primary" class="submit" @click="getData">
          查询
        </el-button>
      </div>
      <chart-box :chart-data="chartData"></chart-box>
      <!-- <div class="myChart" ref="chartRef"></div> -->
    </template>
  </div>
</template>

<script>
import {formatYMDhms} from '@/filters'
import {orderTotalReq} from '@/api/order'
import ChartBox from './ChartBox'
export default {
  components: {
    ChartBox,
  },
  data() {
    return {
      date: [],
      chartData: {},
    }
  },
  methods: {
    async getData() {
      let res = await orderTotalReq({
        date: JSON.stringify(this.date),
      })
      //解构数据
      let {data} = res.data
      //处理数据
      let xData = data.map(v => formatYMDhms(v.orderTime))
      // console.log('xData :>> ', xData)
      let series = [
        {
          type: 'bar',
          name: '降雨量',
          data: data.map(v => v.orderAmount),
        },
      ]
      this.chartData = {
        xData,
        series,
      }
      // console.log('series :>> ', series)
      //画图
      // this.renderLine({
      //   series,
      //   xData,
      // })
    },
  },

  created() {
    this.getData()
  },
  mounted() {},
}
</script>

<style lang="scss" scoped>
.total-order {
  width: 100%;
}
.demonstration {
  margin-right: 20px;
}
.block {
  padding: 20px;
  background: #fff;
}
.submit {
  margin-left: 20px;
}
</style>
